<template>
    <el-dialog :model-value="localDialogVisible" :title="localTitle" :before-close="localCancelDialog" width="80%" top="5vh">
        <el-tabs v-model="activeName" @tab-click="handleChangeTab">
            <el-tab-pane label="企业自有媒资" name="medialist">
                <media :packageid="getpackageid" @cancelDialog="localCancelDialog" @getData="localGetData" ref="mediaRef" />
            </el-tab-pane>
            <el-tab-pane label="合作企业分享媒资" name="corppartnermedia">
                <corp-partner-media :packageid="getpackageid" @cancelDialog="localCancelDialog" @getData="localGetData" ref="corppartnermediaRef" />
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script>
    import Media from './mediaDialog/media'
    import CorpPartnerMedia from './mediaDialog/corpPartnerMedia'
    import { ref, toRef, nextTick } from 'vue'
    export default {
        name: "",
        components: {
            Media,
            CorpPartnerMedia
        },
        props:{
            title:{
                type: String,
                default: ''
            },
            visible: {
                type: Boolean,
                default: false
            },
            packageid:{
                type:Number,
                required: true
            }
        },
        emits:['cancelDialog', 'getData'],
        setup(props, context) {
            const localTitle = toRef(props, 'title')
            const localDialogVisible = toRef(props, 'visible')
            const getpackageid = toRef(props, 'packageid')
            
            const localCancelDialog = () => {
                context.emit('cancelDialog')
            }

            const localGetData = () => {
                context.emit('getData')
            }

            const activeName = ref('medialist')
            const mediaRef = ref('')
            const corppartnermediaRef = ref('')

            /** 切换tab事件 **/
            const handleChangeTab = (tab) => {
                if (tab.props.name == 'corppartnermedia') {
                    nextTick(() => {
                        corppartnermediaRef.value.init()
                    })
                }
            }

            return {
                localTitle,
                localDialogVisible,
                getpackageid,
                localCancelDialog,
                localGetData,
                activeName,
                mediaRef,
                corppartnermediaRef,
                handleChangeTab
            }
        }
    }
</script>

<style scoped  lang="scss">

</style>